<!--
* @description 弹出选择用户
* @author zywu
* @date 2021/03/16 20:49:19
!-->
<template>
  <div class="pop-userselect d-flex flex-column">
    <van-tabs v-model="activeTab" @change="handleTabChange">
      <van-tab title="单位用户" :name="singleUserId.join(',')"></van-tab>
      <van-tab title="小微用户" :name="nineUserId.join(',')"></van-tab>
      <van-tab title="维保公司" :name="maitenceUserId.join(',')"></van-tab>
      <van-tab title="其他用户" :name="moreUserId.join(',')"></van-tab>
    </van-tabs>
    <div class="pop-userselect__list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell
          v-for="item in list"
          :key="item.userId"
          :class="{ 'is-selected':selected.accountName==item.accountName }"
          :title="item.name"
          @click="onSelect(item)"
        >
          <template #right-icon>
            <van-icon v-if="selected.accountName==item.accountName" name="success" />
          </template>
        </van-cell>
      </van-list>
    </div>
    <div class="pop-userselect__cancel">
      <van-button plain hairline type="info" block @click="onCancel">取消</van-button>
    </div>
  </div>
</template>

<script>
import { getHaveOrgUserListNotInRole } from '@/api/user'
import { mapState, mapMutations } from 'vuex'
import {
  singleUserId,
  nineUserId,
  maitenceUserId,
  moreUserId,
} from '@/config/dict'

export default {
  props: {
    defaultSelected: {
      type: [String, Object],
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {
      singleUserId,
      nineUserId,
      maitenceUserId,
      moreUserId,
      dataList: [],
      activeTab: '1',
      list: [],
      loading: false,
      finished: false,
      selected: {},
    }
  },

  components: {},

  computed: {
    ...mapState(['platformCode', 'userInfo', 'appKeyObj', 'userOrgIds']),
  },

  watch: {
    // defaultSelected(val) {
    //   this.selected = Object.assign({}, val)
    // },
  },

  created() {
    this.setSelected(this.defaultSelected || {})
  },

  methods: {
    ...mapMutations([]),
    setSelected(obj) {
      this.selected = Object.assign({}, obj)
    },
    handleTabChange() {
      this.list = []
      this.finished = false
      this.loading = false
    },
    onLoad() {
      getHaveOrgUserListNotInRole({
        orgIds: this.userOrgIds,
        roleIds: this.activeTab,
      }).then((res) => {
        res.data.forEach((n) => {
          this.list.push(n)
        })
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= res.total) {
          this.finished = true
        }
      })
    },
    onSelect(item) {
      this.selected = item
      this.$emit('change', item)
    },
    onCancel() {
      this.selected = {}
      this.$emit('change', '')
    },
  },
}
</script>
<style lang='scss'>
@import '../styles/variables.scss';
.pop-userselect {
  height: 100%;
  .van-tabs {
    position: relative;
    padding: 5px 0;
  }
  .van-tabs__line {
    display: none;
  }
  .van-tab--active {
    font-weight: bold;
  }
  &__list {
    flex: 1;
    overflow: auto;
  }
  .van-cell {
    padding-left: 20px;
    padding-right: 20px;
    &.is-selected {
      color: $color-theme;
    }
  }
  &__cancel {
    padding: 20px;
  }
}
</style>